<template>
  <el-container>
    <el-header class="header"> 跨空间关联映射对抗系统
      <div v-if="username=='访问'" class="time-container" @click="handlePath('/login')">用户登陆</div>
      <div v-if="username!=='访问'" class="time-container" @click="cancellation()">注销</div>
      <!-- <div class="small-div2 wel6" v-if="username=='访问'" @click="handlePath('/login')">用户登陆</div> -->

    </el-header>
    <el-main id="app">
      <div class="outer-container">
        <div class="inner-container">
          <div class="side-container">
            <div class="small-div1 wel1" @click="handlePath('/applicationScreen')">应用信息抗泄露</div>
            <div class="small-div1 wel3" @click="handlePath('/networkScreen')">网络设备抗定位</div>
            <div class="small-div1 wel5" @click="handlePath('/userPositioningScreen')">网络用户抗定位</div>
          </div>
          <div class="main-div">
            <div style="z-index: 10;display: flex;flex-direction: column;align-items: center;">
              <div  style="font-size: 32px">欢迎{{ username }}</div>
              <div style="font-size: 25px" v-if="username!=='访问'" @click="cancellation()">【注销】</div>
            </div>

            <div class="main-div-in"></div>
            <div class="main-div-out"></div>
          </div>
          <div class="side-container">
            <div class="small-div2 wel2" @click="handlePath('/deviceHomeScreen')">网络设备抗归属</div>
            <div class="small-div2 wel4" @click="handlePath('/userIdentityScreen')">网络用户抗身份识别</div>
            <div style="padding-left: 35px;" class="small-div2 wel6" @click="handlePath('/cameraPositionAnalysis')">网络摄像头位置分析</div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {getToken} from '@/utils/auth'
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      // currentTime: new Date().toLocaleTimeString(),
      username: '访问',
    };
  },
  mounted() {

    // this.timer = setInterval(() => {
    //   this.currentTime = new Date().toLocaleTimeString();
    // }, 1000);

    //判断是否已经登录
    if (getToken()) {
      //已经登陆的的用户 获取个人信息  登录选项改成注销登录
      //从cookie中获取用户名字
      this.username = Cookies.get('username');
      console.log('this.usernamethis.username', this.username);
    }

  },
  methods: {
    handlePath(path) {
      if (!getToken() && path != '/login') {
        //提醒先去登陆页面登录
        this.$message({
          message: '请先登录',
          type: 'warning'
        });
        this.$router.push("/login");
      } else {
        if (path == '/login' && getToken()) {
          this.$message({
            message: '您已登录',
            type: 'success'
          });

          return;
        }
        this.$router.push(path);
      }
    },
    cancellation() {
      //注销登录
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/';
        })
      }).catch(() => {
      });
    }
  },
  beforeDestroy() {
    // clearInterval(this.timer);
  },
};
</script>
<style lang="scss" scoped>
.header {
  /* line-height: 100px; */
  position: relative;
  /* 添加相对定位 */
  text-align: center;
  font-size: vh(38);
  height: 10vh !important;
  color: #FFFFFF;
  line-height: vh(80);
  background-color: #08214d;
  background-image: url('~@/assets/xd/new/header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.time-container {
  position: absolute;
  right: vh(50);
  top: vh(-4);
  bottom: 0;
  display: flex;
  align-items: center;
  height: 80%;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: vh(22);
  color: #FFFFFF;
  line-height: vh(36);
  /* 其他样式根据需要添加 */
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  margin: 0;
  background-image: url('~@/assets/xd/new/loginbg.png');

  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.outer-container {
  display: flex;
  width: calc(100% - 400px);
  justify-content: center;

}

.inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.side-container {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.main-div {
  width: vh(600);
  height: vh(600);
  margin: 0 vh(50);
  padding: 0 0 vh(100) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: vh(44);
  color: #FFFFFF;
  line-height: vh(52);
  background-image: url(~@/assets/xd/new/tuceng3.png) ;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.main-div-out{
  background: url(~@/assets/xd/new/tuceng2.png) no-repeat;
  background-size: contain;

  width: vh(500);
  height: vh(500);
  position: absolute;
}
.main-div-in{
  background: url(~@/assets/xd/new/tuceng1.png) no-repeat;
  background-size: contain;
  width: vh(400);
  height: vh(400);
  position: absolute;
  top: vh(34);
}
.main-div-out{
  animation: turn-out 25s linear infinite;
  transform-origin: 50% 50%;

}
.main-div-in{
  animation: turn-in 25s linear infinite;
  transform-origin: 50% 54%;
}

@keyframes turn-out {
  100% {
    transform: rotateZ(-1turn);
  }
}
@keyframes turn-in {
  100% {
    transform: rotateZ(1turn);
  }
}
.small-div1 {
  position: relative;
  bottom: 20px;
  left: 140px;
  width: vh(448);
  height: vh(80);
  margin-bottom: vh(80);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: vh(24);
  color: #FFFFFF;
}

.small-div2 {
  position: relative;
  bottom: 20px;
  right: 140px;
  width: vh(448);
  height: vh(80);
  margin-bottom: vh(80);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: vh(24);
  color: #FFFFFF;
}


.wel1 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel1.png);
}

.wel3 {
  left: vh(60);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel3.png);
}

.wel5 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel5.png);
}

.wel2 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel2.png);
}

.wel4 {
  right: vh(60);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel4.png);
}

.wel6 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(~@/assets/xd/new/wel6.png);
}
</style>
